<template>
  <div class="contianer">
    <div class="main">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        height="560px"
        size="big"
        :highlight-current-row="true"
        stripe
      >
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </template>
        </el-table-column>
        <el-table-column label="菜单名">
          <template slot-scope="{ row, $index }">
            <el-input class="edit-cell" v-if="isSet[$index]" v-model="row.name" />
            <span v-if="!isSet[$index]">{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tag"
          label="标签"
          :filters="filters"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="{ row, $index }">
            <el-select
              v-if="isSet[$index]"
              v-model="row.typeId"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <span v-if="!isSet[$index]">{{ row.typeId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="{ row, $index }">
            <el-button
              type="warning"
              size="mini"
              v-if="!isSet[$index]"
              icon="el-icon-edit"
              circle
              @click="handleEdit($index, row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              v-if="!isSet[$index]"
              icon="el-icon-delete"
              circle
              @click="deleteArticleTag($index, row)"
            ></el-button>
            <el-button
              type="info"
              size="mini"
              v-if="isSet[$index]"
              icon="el-icon-close"
              circle
              @click="handleCancel($index, row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              @click="handleSave($index, row)"
              icon="el-icon-check"
              circle
              v-if="isSet[$index]"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="selectFind">
      <el-select v-model="selectFind" placeholder="请选择" style="width: 100px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option> </el-select
      >&nbsp;
      <el-input
        v-model="selectFindValue"
        placeholder="请输入内容"
        style="width: 300px"
      ></el-input
      >&nbsp;
      <el-button @click="selectFindbtn" type="primary" style="width: 70px; height: 40px"
        >查询</el-button
      >
      <el-button @click="openAddbtn" type="warning" style="width: 70px; height: 40px"
        >添加</el-button
      >
    </div>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog :visible.sync="openAdd" :width="'800px'">
      <div slot="title" class="header-title">
        <span class="title-name">
          <i class="el-icon-s-order" style="margin-right: 10px"></i>
        </span>
        <span class="title-age" @click="openAddRole = true">添加标签类型</span>
      </div>
      <div class="open-add-role">
        <el-form :label-position="labelPosition" label-width="80px" :model="addObj">
          <el-form-item label="类型名字">
            <el-input v-model="addObj.name"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <el-select
            v-model="addObj.typeId"
            clearable
            placeholder="请选择"
            class="type-select"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

        <el-button type="danger" @click="add" class="update-role-menu">确定</el-button>
        <el-button type="info" @click="openAdd = false" class="update-role-menu"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { $findAllArticleTag } from "@/assets/api/user.js";
import { $findAllTag } from "@/assets/api/user.js";
import { $updateArticleTag } from "@/assets/api/user.js";
import { $deleteArticleTag } from "@/assets/api/user.js";
import { $addArticleTag } from "@/assets/api/user.js";

export default {
  props: {
    setWidth: {
      type: Number,
      default: 400,
    },
    setHeight: {
      type: Number,
      default: 400,
    },
  },
  data() {
    return {
      options: [
        {
          value: "name",
          label: "标签名",
        },
        {
          value: "NULL",
          label: "全部",
        },
      ],
      filters: [],
      typeList: "",
      labelPosition: "top",
      openAdd: false,
      isSet: [], //编辑状态
      tableData: [],
      selectFind: "",
      selectFindValue: "",
      currentPage: 1,
      pageSize: 20,
      total: 0,
      isSelectFind: false,
      selectValue: "",
      inputValue: "",
      addObj: {},
    };
  },
  created() {
    this.findAllArticleTag();
    this.findAllTag();
  },
  mounted() {
    //初始化list，并给每行isSet附初始值
    this.findAllArticleTag();
    for (let i = 0; i < this.tableData.length; i++) {
      this.isSet[i] = false;
    }
  },
  methods: {
    filterTag(value, row) {

      return row.typeId === value;
    },
    async findAllTag() {
      await $findAllTag().then((res) => {
        if (res.data.success) {
          this.typeList = res.data.data.findAllTag;
        } else {
          this.message(res);
        }
      });

      let obj = {};
      for (var i = 0; i < this.typeList.length; i++) {
        obj.text = this.typeList[i].name;
        obj.value = this.typeList[i].name;
        this.filters.push(obj);
        obj = {};
      }
    },
    openAddbtn() {
      this.openAdd = true;
    },
    add() {
      $addArticleTag(this.addObj).then((res) => {
        this.$confirm("是否添加该文章标签类型？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.message(res);
            if (res.data.success) {
              this.openAdd = false;
              location.reload();
            }
          })
          .catch(() => {});
      });
    },
    //保存按钮
    async handleSave(index, row) {
      console.log(row);
      $updateArticleTag(row).then((res) => {
        this.message(res);
        this.findAllArticleTag();
      });
      //用户列表接口
      //关闭开启编辑状态，一定要使用$set进行更新
      this.isSet[index] = false;
      //   this.$set(this.isSet, index, false);
    },

    //删除
    async deleteArticleTag(index, row) {
      this.$confirm("此操作将永久删除该类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $deleteArticleTag(row).then((res) => {
            this.message(res);
            this.findAllArticleTag();
          });
          //用户列表接口
          //关闭开启编辑状态，一定要使用$set进行更新
          this.isSet[index] = false;
          this.$set(this.isSet, index, false);
        })
        .catch(() => {});
    },

    //取消编辑
    handleCancel(index, row) {
      //关闭开启编辑状态，一定要使用$set进行更新
      this.isSet[index] = false;
      this.$set(this.isSet, index, false);
      //重新获取列表，因为使用v-model双向绑定，
      //虽然未操作数据库，但是页面会现实修改的后值
      this.findAllArticleTag();
    },
    handleEdit(index, row) {
      //如果已经打开编辑状态，直接返回
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.isSet[i]) {
          this.$message({
            message: "当前编辑未保存！",
            type: "error",
          });
          return false;
        }
      }
      //否则开启编辑状态，一定要使用$set进行更新
      this.isSet[index] = true;
      this.$set(this.isSet, index, true);
    },
    bitMenubtn(row) {
      var prompt = row.status == 0 ? "禁用" : "解除禁用";
      this.$confirm("是否" + prompt + "该权限?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $bitMenu(row.id).then((res) => {
            this.message(res);
            this.findAllArticleTag();
          });
        })
        .catch(() => {});
    },
    findAllArticleTag() {
      if (this.isSelectFind) {
        $findAllArticleTag(
          this.pageSize,
          this.currentPage,
          this.selectValue,
          this.inputValue
        ).then((res) => {
          if (res.data.success) {
            this.tableData = res.data.data.findAllArticleTag;
            this.total = res.data.data.total;
          }
        });
      } else {
        $findAllArticleTag(this.pageSize, this.currentPage, "NULL", "NULL").then(
          (res) => {
            if (res.data.success) {
              this.tableData = res.data.data.findAllArticleTag;
              this.total = res.data.data.total;
            }
          }
        );
      }
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.findAllArticleTag();
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "success-row";
      } else if (rowIndex % 2 === 0) {
        return "warning-row";
      }
      return "";
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findAllArticleTag();
    },
    selectFindbtn() {
      this.selectValue = this.selectFind;
      if (this.selectFindValue == "") {
        this.inputValue = "NULL";
      } else {
        this.inputValue = this.selectFindValue;
      }
      this.isSelectFind = true;
      this.currentPage = 1;
      this.findAllArticleTag();
    },
  },
};
</script>

<style scoped>
.type-select {
  margin-top: 20px;
}
.open-add-role {
  margin-left: 100px;
  height: 250px;
  width: 550px;
}
.resettingAccountPass {
  width: 100px;
  height: 35px;
  margin-left: 35px;
}

.main {
  width: 90%;
  margin: 0 auto;
}

.el-table .warning-row {
  background: #e7e6e6;
}

.el-table .success-row {
  background: #7ff5df;
}

.el-table tbody tr:hover > td {
  background-color: #cccccc !important;
}
</style>

<style scoped>
* {
  font-family: "Hiragino Sans GB";
}

.imgUtils {
  width: 80px;
  height: 30px;
}

.selectFind {
  margin-top: 10px;
  margin-right: 60px;
  float: left;
}

.contianer {
  height: 500px;
}

.tableImg {
  width: 30px;
  height: 30px;
}

.page {
  margin-top: 20px;
  margin-right: 60px;
  float: right;
}

.tableNoImg {
  width: 30px;
  height: 30px;
  margin-left: 7px;
}
</style>

<style>
.update-role-menu {
  float: right;
  height: 35px;
  width: 70px;
  margin-top: 10px;
  margin-right: 20px;
}

.el-table .warning-row {
  background: #e7e6e6;
}

.el-table .success-row {
  background: #7ff5df;
}

.el-table tbody tr:hover > td {
  background-color: #cccccc !important;
}
</style>
